<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>平台管理系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
	<link rel="stylesheet"href="/css/plat-style.css">
	<style>
		thead tr th{text-align: center!important;font-weight: bold!important;}
		tr td{text-align: center!important;}
	</style>
</head>
<body>
<div class="layui-fluid">
	<div class="layui-row layui-col-space15">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">产品本月销售排行</div>
					<div class="layui-card-body">
						<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" id="echarts-1">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
<script>
	/*layui.config({
		base: '/layuiadmin/' //静态资源所在路径
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'senior']);*/

	function newData(date){
		var seriesData = [];
		var yData = [];
		var seriesLabel = {
		    normal: {
		        show: true,
		        textBorderColor: '#333',
		        textBorderWidth: 2
		    }
		}
		var echarts1 = echarts.init(document.getElementById('echarts-1'));
		$.ajaxSettings.async = false;
		$.post("/statis/queryProSaleStatis",{"date":date},function(result){
			var data = result.data;
			for (i = data.length-1; i >= 0; i--) {
				var proName = data[i].proName;
				if (proName.length>10) {
					proName = proName.slice(0, 10) + "...";
				}
				seriesData.push(data[i].saleNum);
				yData.push(proName);
			}
		});
		$.ajaxSettings.async = true;
		option = {
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'shadow'
		        }
		    },
		    legend: {
		        data: ['销售量']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01],
		    },
		    yAxis: {
		        type: 'category',
		        data: yData,
		        axisLabel: {
			        formatter: function (params) {
			          let index = 10;
			          var newParamsName = params;// 最终拼接成的字符串
			          var paramsNameNumber = newParamsName.length;// 实际标签的个数
			          if (paramsNameNumber>index){
			        	  newParamsName = newParamsName.substring(0,index)  + "...";
			          }
			          return newParamsName;
			        },
			    },
		    },
		    series: [
		        {
		            name: '销售量',
		            type: 'bar',
		            label: seriesLabel,
		            data: seriesData
		        }
		    ]
		};
		echarts1.setOption(option);
	}

	$(function () {
		newData();
	});
</script>
</body>
</html>